<template>
  <el-container>
    <el-header style="height: 100%">
      <div class="pd-10">
        <el-row :gutter="10">
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>总类型数</p>
                <p>{{ ProductCategoryCount }}</p>
              </div>
            </a>
          </el-col>
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>父类型数</p>
                <p>{{ ProductCategoryParentCount }}</p>
              </div>
            </a>
          </el-col>
        </el-row>
      </div>

      <div class="pd-10">
        <el-input style="width: 200px" suffix-icon="el-icon-edit" placeholder="请输入名称"
                  v-model="productCategoryName"></el-input>
        <el-select class="ml-5" filterable clearable v-model="productCategoryParentName" placeholder="父级类型">
          <el-option v-for="item in  ProductCategoryParentList " :label="item.productCategoryName"
                     :value="item.productCategoryName"></el-option>
        </el-select>
        <el-button class="ml-5" icon="el-icon-search" type="primary" @click="load">搜索</el-button>
        <el-button class="ml-5" icon="el-icon-edit" type="warning" @click="reset">重置</el-button>
        <el-button class="ml-5" type="primary" icon="el-icon-circle-plus-outline" @click="openDialog('insert')">新增
        </el-button>
      </div>
    </el-header>
    <el-main>
      <el-table :data="tableData" border stripe v-loading="loading" height="560">
        <el-table-column prop="productCategoryId" label="编号" width="80">
        </el-table-column>
        <el-table-column prop="productCategoryName" sortable label="名称" width="140">
        </el-table-column>
        <el-table-column prop="productCategoryParentName" sortable label="父类" width="140">
        </el-table-column>
        <el-table-column prop="productCategoryIcon" label="图标">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="GetProductCategoryDetail(scope.row.productCategoryId)" type="text" size="small">编辑
            </el-button>
            <el-button style="color: #F56C6C" @click="deleteProductCategory(scope.row.productCategoryId)" type="text"
                       size="small">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--        新增用户弹出框-->
      <el-dialog title="添加商品类型" :visible.sync="InsertDialogFormVisible">
        <el-form :model="form">
          <el-form-item label="商品类型名称" :label-width="formLabelWidth">
            <el-input placeholder="请输入商品类型名称" v-model="form.productCategoryName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品类型序号" :label-width="formLabelWidth">
            <el-input type="number" placeholder="请输入商品序号(越大越靠前)" v-model="form.productCategorySort"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" :label-width="formLabelWidth">
            <el-input placeholder="请选择图标" v-model="form.productCategoryIcon" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品父级类型" :label-width="formLabelWidth">
            <el-select filterable clearable v-model="form.productCategoryParentId" placeholder="请选择父级类型">
              <el-option v-for="item in ProductCategoryParentList" :label="item.productCategoryName"
                         :value="item.productCategoryId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelDialog('insert')">取 消</el-button>
          <el-button type="primary" @click="InsertProductCategory">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="修改商品类型" :visible.sync="UpdateDialogFormVisible">
        <el-form :model="form">
          <el-form-item label="商品类型编号" :label-width="formLabelWidth">
            <el-input :disabled="true" placeholder="商品类型编号" v-model="form.productCategoryId"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品类型名称" :label-width="formLabelWidth">
            <el-input placeholder="商品类型名称" v-model="form.productCategoryName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品类型序号" :label-width="formLabelWidth">
            <el-input type="number" placeholder="商品序号(越大越靠前)" v-model="form.productCategorySort"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" :label-width="formLabelWidth">
            <el-input placeholder="图标" v-model="form.productCategoryIcon" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品父级类型" :label-width="formLabelWidth">
            <el-select filterable clearable v-model="form.productCategoryParentId" placeholder="请选择父级类型">
              <el-option v-for="item in ProductCategoryParentList" :label="item.productCategoryName"
                         :value="item.productCategoryId"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="UpdateProductCategory">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
    <el-footer>
      <div class="pd-10">
        <!--          current-page: 当前的页码
                      page-size: 每页的个数
        -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[20 ,40, 80, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-footer>

  </el-container>
</template>

<script>
export default {
  name: "ProductCategory",
  data() {
    return {
      loginStatus: true,
      loading: true,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      ProductCategoryCount: 0,
      ProductCategoryParentCount: 0,
      productCategoryName: "",
      productCategoryParentName: "",
      InsertDialogFormVisible: false,
      UpdateDialogFormVisible: false,
      formLabelWidth: '120px',
      ProductCategoryParentList: [],
      form: {
        productCategoryId: '',
        productCategoryName: '',
        productCategoryParentId: null,
        productCategorySort: 1,
        productCategoryIcon: ''
      },
    }
  },
  created() {
    this.load()
    this.FindProductCategoryParent();
    this.FindProductCategoryCount();
    this.FindProductCategoryParentCount();
  },
  methods: {
    load() {
      this.loading = true
      this.$axios({
        method: "get",
        url: this.$api.FindProductCategoryPage,
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          productCategoryName: this.productCategoryName,
          productCategoryParentName: this.productCategoryParentName
        },
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        this.loading = false

      })
    },
    //修改每页的条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    //修改页码
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    //搜索重置
    reset() {
      this.productCategoryName = ""
      this.productCategoryParentName = ""
      this.load()
    },
    openDialog(type) {
      this.FindProductCategoryParent();
      this.form = {
        productCategoryId: '',
        productCategoryName: '',
        productCategoryParentId: null,
        productCategorySort: 1,
        productCategoryIcon: ''
      }
      if (type == 'insert') {
        this.InsertDialogFormVisible = true
      } else if (type == 'update') {
        this.UpdateDialogFormVisible = true
      }
    },
    //关闭弹出框
    cancelDialog(type) {
      this.form = {
        productCategoryId: '',
        productCategoryName: '',
        productCategoryParentId: null,
        productCategorySort: 1,
        productCategoryIcon: ''
      }
      if (type == 'insert') {
        this.InsertDialogFormVisible = false
      } else if (type == 'update') {
        this.UpdateDialogFormVisible = false
      }
    },
    deleteProductCategory(productCategoryId) {
      this.$confirm('此操作将删除该商品类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: 'delete',
          url: this.$api.DeleteProductCategory,
          headers: {'content-type': 'multipart/form-data'},
          data: {
            'productCategoryId': productCategoryId
          }
        }).then(res => {
          if (res.code === 200 || res.code == false) {
            this.$notify({
              title: '成功',
              message: '商品类型删除成功',
              type: 'success'
            });
            this.load()
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
            this.load()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //获取所有的商品父级类型
    FindProductCategoryParent() {
      this.$axios({
        url: this.$api.FindProductCategoryParent,
        method: 'get',
      }).then(res => {
        this.ProductCategoryParentList = res.data

      })
    },
    //新增一个商品类型
    InsertProductCategory() {
      this.$axios({
        url: this.$api.InsertProductCategory,
        method: 'post',
        headers: {'content-type': 'multipart/form-data'},
        data: this.form,
      }).then(res => {
        this.$notify({
          title: '成功',
          message: '类型添加成功',
          type: 'success'
        });
        this.load()
        this.cancelDialog('insert')
      })
    },
    //修改商品类型
    UpdateProductCategory() {
      this.$axios({
        url: this.$api.InsertProductCategory,
        method: 'post',
        headers: {'content-type': 'multipart/form-data'},
        data: this.form,
      }).then(res => {
        this.$notify({
          title: '成功',
          message: '类型修改成功',
          type: 'success'
        });
        this.load()
        this.cancelDialog('update')
      })
    },
    //获取商品类型详情
    GetProductCategoryDetail(productCategoryId) {
      this.$axios({
        url: this.$api.FindProductCategoryDetail,
        method: 'get',
        params: {
          productCategoryId: productCategoryId
        }
      }).then(res => {
        this.openDialog('update')
        this.form = res.data
      })
    },
    FindProductCategoryCount() {
      this.$axios({
        url: this.$api.FindProductCategoryCount,
        method: 'get'
      }).then(res => {
        this.ProductCategoryCount = res.data
      })
    },
    FindProductCategoryParentCount() {
      this.$axios({
        url: this.$api.FindProductCategoryParentCount,
        method: 'get'
      }).then(res => {
        this.ProductCategoryParentCount = res.data
      })
    },
  },
}
</script>

<style scoped>

</style>